<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElButton, ElUpload, ElMessage, ElSelect,ElOption } from 'element-plus'
import api from '@/api'

const { memberImport,getOrgList } = api;
const importLoading = ref(false)
const orgList= ref([])
const orgId = ref('')
const pageLoad=async ()=>{
    const res=await getOrgList();
    if(res.data){
        orgList.value=res.data;
    }
}
pageLoad();
const importMember = async (o) => {
    if(!orgId.value){
        ElMessage.success('请选择机构!')
        return;
    }
    importLoading.value = true
    const res = await memberImport({ files: o.file, orgId: orgId.value }).finally((res) => {
        importLoading.value = false
    })
    if (res.data) ElMessage.success('导入数据成功')
}
const handleOrgChange=(val)=>{
    orgId.value=val
    console.log(val)
}
</script>
<template>
    <div style="display: flex;flex-direction: column;gap:20px">
        <ElSelect placeholder="请选择机构" style="width: 200px;" @change="handleOrgChange" v-model="orgId">
            <ElOption v-for="(item,index) in orgList" :key="index" :label="item.name" :value="item.id"/>
        </ElSelect>
        <ElUpload style="margin-left: 15px; display: inline-block" :http-request="(o) => { importMember(o) }"
            :show-file-list="false" accept=".xls, .xlsx" action="">
            <ElButton type="success" :loading="importLoading">导入会员</ElButton>
        </ElUpload>
    </div>
</template>